<template>
  <div>
    <el-row>
      <el-col :span="4" class="index_hz1">
        <div class="index_hz1_1">
          <img src="../assets/index_1.png" width="35" />
          <span>&nbsp;&nbsp;智慧宿管云平台</span>
        </div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#304156"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <router-link to="/index">
                <el-menu-item index="index+'">
                  <i class="el-icon-setting"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
              </router-link>
              <el-submenu :index="String(index+1)" v-for="(item,index) in list" :key="index">
                <div slot="title">
                  <i class="el-icon-s-order"></i>
                  <span v-html="item.meta['title']"></span>
                </div>

                <el-menu-item-group
                  :index="String((index+1)+'-'+index2)"
                  v-for="(item2,index2) in item.children"
                  :key="index2"
                >
                  <router-link :to="item2.path">
                    <el-menu-item>{{item2.meta.title}}</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" class="index_hz2">
        <el-row>
          <el-col :span="24" class="index_hz2_1">
            <span style=" float: left;">
              <i class="el-icon-s-fold" />
              <span style="color: #8d8d8d;">
                &nbsp;&nbsp;&nbsp;首页
                <span style="color:#c1c1c1">/基础数据/宿舍管理</span>
              </span>
            </span>
            <div class="index_hz2_2">
              <i class="el-icon-zoom-in" />
              <i class="el-icon-s-operation" />
              <i class="el-icon-edit" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-dropdown id="lalala">
                <span class="el-dropdown-link">
                  <img src="../assets/tou.png" style="position: relative;top:10px;" />&nbsp;&nbsp;
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="z-index=9">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>布局设置</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <div class="index3_hz1">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="margin-left:50px;"
            >
              <el-form-item label="宿舍栋号">
                <el-select v-model="formInline.a1" placeholder="宿舍栋号">
                  <el-option
                    :label="item.dictLabel"
                    v-for="(item, index) in dd"
                    :key="index"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层">
                <el-select v-model="formInline.a2" placeholder="楼层">
                  <el-option
                    :label="item.dictLabel"
                    v-for="(item,index) in lou"
                    :key="index"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="宿舍号">
                <el-input v-model="formInline.a3" placeholder="宿舍号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="formInline.a4" placeholder="状态" style="margin-left:25px;">
                  <el-option
                    :label="item.dictLabel"
                    v-for="(item,index) in see"
                    :key="index"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <br />
              <div style="float:right;margin-right:128px;">
                <el-button type="primary" @click="tab()" icon="el-icon-search">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
              </div>
            </el-form>
          </div>
          <el-button type="primary" style="margin-left:50px;" @click="dialogVisible = true">+新增</el-button>
          <el-button type="danger" disabled>删除</el-button>
          <el-button type="success" disabled>修改</el-button>
          <el-dialog
            title="添加宿舍信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div class="hezi">
              <el-form
                :inline="true"
                :model="tian"
                class="demo-form-inline"
                style="margin-left:50px;"
              >
                <el-form-item label="宿舍栋号">
                  <el-select v-model="tian.a1" placeholder="宿舍栋号">
                    <el-option
                      :label="item.dictLabel"
                      v-for="(item, index) in dd"
                      :key="index"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="楼层">
                  <el-select v-model="tian.a2" placeholder="楼层" style="margin-left:28px;">
                    <el-option
                      :label="item.dictLabel"
                      v-for="(item,index) in lou"
                      :key="index"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="宿舍号">
                  <el-input v-model="tian.a3" placeholder="宿舍号" style="margin-left:15px;"></el-input>
                </el-form-item>
                <el-form-item label="宿管老师">
                  <el-select v-model="tian.a4" placeholder="宿管老师">
                    <el-option
                      :label="item.username"
                      v-for="(item,index) in laos"
                      :key="index"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </span>
          </el-dialog>

          <el-table
            :data="tableData"
            height="400"
            border
            style="width: 100%;margin-top:20px;font-size:10px;"
          >
            <el-table-column align="center" prop="id" label="序号" width="90"></el-table-column>
            <el-table-column align="center" prop="buildingNo" label="宿舍栋号" width="100"></el-table-column>
            <el-table-column align="center" prop="storey" label="楼层" width="100"></el-table-column>
            <el-table-column align="center" prop="dormitoryNo" label="宿舍号" width="100"></el-table-column>
            <el-table-column align="center" prop="dormitoryTeacherName" label="宿管老师"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" prop="modifyTime" label="修改时间"></el-table-column>

            <el-table-column align="center" prop="looks" label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="tableData[scope.$index].status"
                  :inactive-value='"0"'
                  :active-value='"1"'
                  active-color="#b90c0c"
                  inactive-color="#0269ad"
                  @change="changSwitch(scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="updata(scope.row.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="float:right;margin-right:40px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <!-- 修改 -->
    <el-dialog
      title="修改宿舍信息"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <div class="hezi">
        <el-form :inline="true" :model="tian" class="demo-form-inline" style="margin-left:50px;">
          <el-form-item label="宿舍栋号" prop="a1">
            <el-select v-model="upda.buildingNo" placeholder="宿舍栋号" disabled>
              <el-option
                :label="item.dictLabel"
                v-for="(item, index) in dd"
                :key="index"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼层" prop="a2">
            <el-select v-model="updata.storey" placeholder="楼层" disabled style="margin-left:28px;">
              <el-option
                :label="item.dictLabel"
                v-for="(item,index) in lou"
                :key="index"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宿舍号" prop="a3">
            <el-input
              v-model="upda.dormitoryNo"
              disabled
              placeholder="宿舍号"
              style="margin-left:15px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="宿管老师" prop="a4">
            <el-select v-model="upda.dormitoryTeacherId" placeholder="宿管老师">
              <el-option
                :label="item.username"
                v-for="(item,index) in laos"
                :key="index"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2= false">取 消</el-button>
        <el-button type="primary" @click="updata2()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      upda: [],
      dialogVisible2: false,
      laos: [],
      tian: {
        a1: [],
        a2: [],
        a3: "",
        a4: []
      },
      dialogVisible: false,

      pageIndex: 0,
      total: 0,
      totalPage: 0,
      currentPage4: 4,
      title: "",
      tableData: [],
      itemdictValue: [],
      see: [],
      lou: [],
      list: [],
      dd: [],
      value: "",
      index: "",
      formInline: {
        a1: [],
        a2: [],
        a3: "",
        a4: [],
        a5: [],
        a6: []
      }
    };
  },
  mounted() {},
  methods: {
    reset(){
      this.formInline.a1="",
      this.formInline.a2="",
      this.formInline.a3="",
      this.formInline.a4=""
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // var that = this;
      this.axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=1&pageSize=${val}`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // this.pageIndex = val;
      this.axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=${val}&pageSize=10`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    left() {
      let that = this;
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/sys/menu/getRouters",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(op => {
        that.list = op.data.data;
        // console.log(that.list)
      });
    },
    dong() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/sys/dict/detail/dictType/sys_building",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(d => {
        // console.log(d);
        this.dd = d.data.data;
      });
    },
    lous() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/sys/dict/detail/dictType/sys_storey",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(l => {
        // console.log(l);
        this.lou = l.data.data;
      });
    },
    look() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/sys/dict/detail/dictType/sys_normal_disable",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(looks => {
        // console.log(looks);
        this.see = looks.data.data;
      });
    },
    tab() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bdormitory/list?pageNum=1&pageSize=10&buildingNo=" +
          this.$data.formInline.a1 +
          "&storey=" +
          this.$data.formInline.a2 +
          "&dormitoryNo=" +
          this.$data.formInline.a3 +
          "&status=" +
          this.$data.formInline.a4 +
          "",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(all => {
        console.log(all);
        this.tableData = all.data.data.list;
      });
    },
    add() {
      this.$axios({
        method: "post",
        url: "http://122.112.253.28:8095/prod-api/basedata/bdormitory/create",
        data: {
          buildingNo: this.tian.a1,
          storey: this.tian.a2,
          dormitoryNo: this.tian.a3,
          dormitoryTeacherId: this.tian.a4
        },
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(adds => {
        console.log(adds);
        if (adds.data.code == 200) {
          alert("添加成功");
          this.dialogVisible = false;
          this.tab();
        } else {
          alert("添加失败");
          this.dialogVisible = false;
        }
      });
    },
    slao() {
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/sys/user/getDorTeacherList",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(lao => {
        console.log(lao);
        this.laos = lao.data.data;
      });
    },
    del(id) {
      this.$axios({
        method: "DELETE",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bdormitory/deleteByIds/" +
          id,
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(del => {
        alert("删除成功！");
        this.tab();
      });
    },
    updata(id) {
      this.dialogVisible2 = true;
      console.log(id);
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/basedata/bdormitory/" + id,
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(updata => {
        this.idd = id;
        this.upda = updata.data.data;
      });
    },
    updata2() {
      this.$axios({
        method: "PUT",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bdormitory/update/" +
          this.idd,
        data: this.upda,
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(updata => {
        alert("修改成功！");
        this.tab();
        this.dialogVisible2 = false;
      });
    }
  },
  mounted() {
    this.left();
    this.dong();
    this.lous();
    this.look();
    this.tab();
    this.slao();
  }
};
</script>

<style>
body {
  margin: 0;
}
.index_hz1 {
  overflow-x: hidden;
  overflow-y: auto;
  height: 720px;
  background: #304156;
}
.el-tree {
  position: relative;
  cursor: default;
  color: #bfcbd9;
  background: rgba(255, 255, 255, 0);
}
.index_hz1_1 {
  width: 100%;
  height: 65px;
  line-height: 65px;
  background: #2b2f3a;
}
.index_hz1_1 span {
  color: white;
  font-size: 17px;
  font-weight: bold;
}
.index_hz1_1 img {
  vertical-align: middle;
  margin-left: 10px;
}

.index_hz2 {
  height: 720px;
  overflow-x: hidden;
}
.index_hz2_1 {
  height: 75px;
  line-height: 60px;
  border: 1px rgb(236, 236, 236) solid;
}
.el-icon-s-fold:before {
  position: relative;
  top: 2px;
  left: 5px;
  content: "\E7A9";
  font-size: 19px;
}
.index_hz2_2 {
  float: right;
  margin-left: 400px;
  height: 60px;
  width: 210px;
}
#lalala {
  z-index: 999;
}
.el-icon-zoom-in:before {
  content: "\E777";
  font-size: 22px;
}
.el-icon-s-operation:before {
  margin-left: 10px;
  content: "\E7BB";
  font-size: 22px;
}
.el-icon-edit:before {
  margin-left: 10px;
  content: "\E78C";
  font-size: 22px;
}
.el-menu {
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  width: 240px;
  padding-left: 0;
  background-color: #304156;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(105, 105, 105);
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-submenu__title {
  width: 240px;
  color: white;
}
form {
  clear: both;
}
.index3_hz1 {
  clear: both;
  width: 100%;
  height: 110px;
  border: 1px black solid;
}
.hezi {
  width: 100%;
  height: 250px;
}
.el-button.is-circle {
  border-radius: 45%;
  padding: 7px;
}
.el-icon-edit:before {
  margin-left: 0px;
  width: 54px;
  content: "\E78C";
  font-size: 22px;
}
</style>